
<template>
        <div>
            <Table  border   ref="selection" :columns="columns" :data="tableData" @on-selection-change="selectChange"></Table>
            <!-- 单删 -->
            <Modal v-model="removeModel" width="360">
                <p slot="header" style="color:#f60;">
                    <Icon type="information-circled"></Icon>
                    <span>删除提示</span>
                </p>
                <div style="text-align:center">
                    <p style="font-size:18px;">数据删除后不可恢复，请谨慎操作！</p>
                </div>
                <div slot="footer">
                    <Button type="error" @click="remove()" size="large">删除</Button>
                    <Button type="info" @click="cancel()" size="large">取消</Button>
                </div>
            </Modal>
            <Modal v-model="removeModelTable" width="360">
                <p slot="header" style="color:#f60;">
                    <Icon type="information-circled"></Icon>
                    <span>批量删除提示</span>
                </p>
                <div style="text-align:center">
                    <p style="font-size:18px;">数据批量删除后不可恢复，请谨慎操作！</p>
                </div>
                <div slot="footer">
                    <Button type="error" @click="batchDelete()" size="large">删除</Button>
                    <Button type="info" @click="batchCancel()" size="large">取消</Button>
                </div>
            </Modal>
            <Modal v-model="removeModelTableData" width="360">
                <p slot="header" style="color:#f60;">
                    <Icon type="information-circled"></Icon>
                    <span>批量删除提示</span>
                </p>
                <div style="text-align:center">
                    <p style="font-size:18px;">请选中要删除的数据?</p>
                </div>
                <div slot="footer">
                    <Button type="info" @click="sureData()" size="large">确定</Button>
                </div>
            </Modal>
        </div>
</template>

<script>

import ajax from '../../../../../libs/axios.js'
export default {
    props: {
        tableData: Array,
        access: Object
    },
    data () {
        return {
            id:'',
            index:'',
            removeModel:false,
            removeModelTable:false,
            removeModelTableData:false,
            singleState:true,
            seletion:[],
            // 全选
            selectData:[],
            allNoSeletionData:[],
            newestData:[],
            columns: [
                {
                    title: '序号',
                    type: 'index',
                    width: 71,
                    align: 'center'
                },
                {
                    title: '类型名称',
                    align: 'center',
                    width: 400,
                    key: 'typeName',
                    editable: true
                },
                {
                    title: '类型数据',
                    width: 398,
                    align: 'center',
                    key: 'typeValue',
                    editable: true
                },
                {
                    title: '创建时间',
                    width: 398,
                    align: 'center',
                    key: 'createDate',
                    editable: true
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 398,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: this.access.edit === true ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(params.row.id)
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        disabled:this.access.remove !== true
                                    },
                                    on: {
                                        click: () => {
                                            this.tipsRemove(params.index, params.row.id)
                                        }
                                    }
                                },
                                '删除'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: this.access.func !== true ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.rolefunction(params.row.id)
                                        }
                                    }
                                },
                                '数据设置'
                            )
                        ])
                    }
                }
            ],
            data: []
        }
    },

    methods: {
        init () {
        },
        editData (id) {
            let argu = {
                id: id
            }
            this.$router.push({
                name: 'updateBasicType',
                params: argu
            })
        },
        // 取消删除
        cancel () {
            this.removeModel = false
        },
        batchCancel () {
            this.removeModelTable = false
        },
        sureData () {
            this.removeModelTableData = false
        },
        // 删除弹框提醒
        tipsRemove (index, id) {
            this.index = index
            this.id = id
            this.removeModel = true
        },
        //基础数据跳转
        rolefunction (id) {
            let argu = {
                id: id,
                queryType:"type"
            }
            this.$router.push({
                name: 'basicdataindex',
                params: argu
            })
        },
        remove () {
            let index = this.index
            let id = this.id
            let userId = window.localStorage.getItem('userId')
            let userName = window.localStorage.getItem('userName')
            let url = '/adminapi/basictype/deleteData.html'
            let data = {
                id: id,
                userId: userId,
                userName: userName
            }
            console.log('------------dara-------------')
            ajax.formRes(url, data).then(res => {
                console.log(res)
                if (res) {
                    this.tableData.splice(index, 1)
                    // 删除成功后关闭弹框
                    this.removeModel = false
                }
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        // 获取批量删除数据
        selectChange (seletion) {
            console.log("seletion执行中。。。")
            let newData = []
            for (let index = 0; index < seletion.length; index++) {
                const element = seletion[index].id
                newData.push(element)
            }
            this.selectData = newData
            console.log(this.selectData)

        },
    },
    created () {
        this.init()
    }
}
</script>
